<template>
    <el-dialog :title="tip" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-form label-position="right" label-width="80px" :model="obj">
            <el-form-item :label="item" v-for="(item, index) in labels" :key="index">
                <el-input v-model="obj[keys[index]]"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="hide">取 消</el-button>
            <el-button type="primary" @click="dialogVisibleClick">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: 'Dialog',
    //需要传入操作对象，tip提示，labels数组，dialogVisible 是否显示，点击确定后的方法 sure
    props: {
        obj: {
            type: Object
        },
        tip: {
            type: String
        },
        labels: {
            type: Array
        },
        dialogVisible: {
            type: Boolean,
            default: false
        },
        sure: {
            type: Function
        }
    },
    model: {
        prop: 'dialogVisible',
        event: 'change'
    },
    data() {
        return {

        }
    },
    methods: {
        //关闭对话框
        handleClose(done) {
            this.$emit('change', false)
        },
        //确认
        dialogVisibleClick() {
            // // this.dialogVisible = false
            // this.$emit('change', false)
            this.sure(this.obj)
        },
        //取消
        hide() {
            // this.dialogVisible = false
            this.$emit('change', false)
        }
    },
    computed: {
        keys: function () {
            let arr = Object.keys(this.obj)
            return arr
        }
    },
    mounted() {

    }
}

</script>